<template>
	<u-popup v-model="visible" mode="bottom" height="80%" closeable @open="handleInit" @close="handleClose">
		<view class="content-wrap">
			<text class="popup-title">优惠卷</text>
			<u-tabs class="tabs" ref="tabs" :list="tabs" :is-scroll="false" :current="tabIndex" @change="handleChangeTab"></u-tabs>
			    <view class="list-wrap list-wrap--usable" v-if="tabIndex == 0">
			    	<view class="item-wrap" :class="{ invalid: !item.isValid }" v-for="(item, index) in usable" :key="index" @click="handleSelectCoupon(item)">
			    		<image class="item-bg" src="../../static/image/coupon.png"></image>
			    		<!-- 满减卷 -->
			    		<view class="item-left reduce" v-if="item.deductType == 'SUBTRACT'">
			    			<text class="money-text text-price">{{ item.couponMoney }}</text>
			    			<text class="limit-text">满{{ item.orderMinMoney }}元可用</text>
			    		</view>
			    		<!-- 折扣 -->
			    		<view class="item-left discount" v-if="item.deductType == 'FULL'">
			    			<text class="name-text">{{ item.discountRatioVO }}</text>
			    			<text class="label-text">折</text>
			    		</view>
			    		<view class="item-right">
			    			<text class="title-text">{{ item.title }}</text>
			    			<text class="tips-text">{{ item.intro }}</text>
			    			<text class="date-text">有效期至：{{ item.validTime }}</text>
			    		</view>
			    	</view>
			    </view>
			    <view class="list-wrap list-wrap--invalid" v-if="tabIndex == 1">
			    	<view class="item-wrap" :class="{ invalid: !item.isValid }" v-for="(item, index) in invalid" :key="index" @click="handleSelectCoupon(item)">
			    		<image class="item-bg" src="../../static/image/coupon.png"></image>
			    		<!-- 满减卷 -->
			    		<view class="item-left reduce" v-if="item.deductType == 'SUBTRACT'">
			    			<text class="money-text text-price">{{ item.couponMoney }}</text>
			    			<text class="limit-text">满{{ item.orderMinMoney }}元可用</text>
			    		</view>
			    		<!-- 折扣 -->
			    		<view class="item-left discount" v-if="item.deductType == 'FULL'">
			    			<text class="name-text">{{ item.discountRatioVO }}</text>
			    			<text class="label-text">折</text>
			    		</view>
			    		<view class="item-right">
			    			<text class="title-text">{{ item.title }}</text>
			    			<text class="tips-text">{{ item.intro }}</text>
			    			<text class="date-text">有效期至：{{ item.validTime }}</text>
			    		</view>
			    	</view>
			    </view>                
		</view>
	</u-popup>
</template>

<script>
export default {
	name: 'coupon-selection',
	props: {
		show: {
			type: Boolean
		},
		price: {
			type: [String, Number],
			default: 0
		}
	},
	watch: {
		show: {
			deep: true,
			immediate: true,
			handler (val) {
				this.visible = val;
			}
		},
		price: {
			deep: true,
			immediate: true,
			handler (val) {
				this.handleGetData(val);
			}
		}
	},
	data() {
		return {
			visible: this.show,
			tabs: [{ name: '可用优惠卷' }, { name: '不可用优惠卷' }],
			tabIndex: 0 ,// tab索引
			usable: [], // 有效列表
			invalid: [], // 无效列表
		};
	},
	methods: {
		// 初始化
		handleInit() {
			this.$nextTick(() => {
				this.$refs.tabs.init();
			});
		},
		// 切换tab
		handleChangeTab(index) {
			this.tabIndex = index;
		},
		// 选择优惠卷
		handleSelectCoupon(item) {
			this.$emit('confirm', item);
			this.handleClose();
		},
		// 获取优惠卷数据
		handleGetData(val) {
			this.$api.coupons({ totalMoney: val }).then(res => {
				this.usable = res.validList;
				this.invalid = res.invalid;
				this.tabs[0].name = `可用优惠卷(${this.usable.length})`;
				this.tabs[1].name = `不可用优惠卷(${this.invalid.length})`;
			});
		},
		// popup关闭
		handleClose(){
			this.$emit('update:show',false);
		}
	}
};
</script>

<style scoped lang="scss">
.content-wrap {
	display: flex;
	flex-direction: column;
	.popup-title {
		top: 0;
		left: 0;
		width: 100%;
		z-index: 1;
		position: fixed;
		font-size: 32rpx;
		padding: 20rpx 30rpx;
		background-color: #fff;
	}
	.tabs{
		top: 60rpx;
		left: 0rpx;
		width: 100%;
		z-index: 999;
		position: fixed;
	}
	.list-wrap {
		display: flex;
		padding: 0 30rpx;
		margin-top: 120rpx;
		flex-direction: column;
		.item-wrap {
			display: flex;
			height: 260rpx;
			padding: 20rpx;
			position: relative;
			.item-bg {
				top: 0;
				left: 0;
				z-index: -1;
				width: 100%;
				height: 260rpx;
				position: absolute;
			}
			.item-left {
				width: 210rpx;
				height: 180rpx;
				padding: 0 16rpx;
				display: flex;
				flex-shrink: 0;
				align-items: center;
				border-radius: 4rpx;
				flex-direction: column;
				justify-content: center;
				&.reduce {
					background-color: #2cb5f3;
				}
				&.discount {
					color: #ffffff;
					flex-direction: row !important;
					background-color: #f3aa2c;
				}
				.money-text {
					color: #ffffff;
					font-size: 48rpx;
					font-weight: bold;
				}
				.name-text {
					color: #fff;
					font-size: 48rpx;
				}
				.label-text {
					color: #fff;
					font-size: 28rpx;
					margin-top: 15rpx;
				}
				.limit-text {
					color: #ffffff;
					opacity: 0.72;
				}
			}
			.item-right {
				width: 100%;
				display: flex;
				height: 170rpx;
				line-height: 1;
				margin-left: 20rpx;
				flex-direction: column;
				justify-content: space-around;
				.title-text {
					font-size: 32rpx;
				}
				.tips-text {
					color: #999999;
				}
				.date-text {
					color: $primary-color;
				}
			}
		}
	}
	// 失效的样式
	.list-wrap--invalid{
		.item-left{
			background-color: #d6d6d6 !important;
		}
		.tips-text {
			color: #999999 !important;
		}
		.date-text {
			color: #b4b4b4 !important;
		}
	}
}
</style>
